<template>
  <div style="width: 100%;height: 100%;">
    <div class="main" ref="main">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "echartItem",
  props:{
    list:{
      type:Array,
      default:()=>[]
    },

    name:{
      type:String,
      default:"数据项"
    },
    color:{
      type:String,
      default:"#0f0"
    }
  },
  watch:{
    "$props.list":{
      handler(){
        this.setEchartsData()
      },
      deep:true,
      // immediate:
    },
    "$props.name":{
      handler(){
        this.init()
      }
    }
  },
  data(){
    return {
      myChart :null,
      dataOptions:{
        xAxis:{},
        series:[]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.myChart = echarts.init(this.$refs.main);
// 绘制图表
      this.myChart.setOption({
        color:[this.$props.color],
        legend: {
          data: [this.$props.name]
        },
        title: {
          text: this.$props.name
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis :{
          type: 'value'
        }, ...this.dataOptions
      });
    },
    getX(){
      return  this.$props.list.map(item=>{
        return  item.createTime.split(" ")[1]
      })
    },
    getY(){
      return  this.$props.list.map(item=>{
        return  Number(item.value)
      })
    },

    setEchartsData(){
     let  xAxis= {
        type: 'category',
          data: this.getX(),
       axisLabel: {
         interval:0,
         rotate:40
       },
      }
      let
      series= [
        {
          data: this.getY(),
          type: 'line',
          name:this.$props.name,
          stack: 'Total',
        }
      ]
      this.myChart.setOption({
        xAxis,
        series
      })


    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  //background: #f00;
}
</style>
